<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <el-button type="success" round size="large" @click="showAdd">新增</el-button>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="appointmentId" label="预约ID" />
            <el-table-column prop="user.realName" label="客户姓名" />
            <el-table-column prop="department.departmentName" label="预约分类" />
            <el-table-column prop="problem" label="问题描述" />
            <el-table-column prop="type.typeName" label="服务类型" />
            <el-table-column prop="appointmentStatus" label="预约状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.appointmentStatus === 0" type="primary">已预约</el-tag>
                    <el-tag v-if="scope.row.appointmentStatus === 2" type="success">服务中</el-tag>
                    <el-tag v-if="scope.row.appointmentStatus === 1" type="info">已取消</el-tag>
                    <el-tag v-if="scope.row.appointmentStatus === 3" type="danger">已完成</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="服务进度">
                <template #default="scope">
                    <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.speed * 10" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="showUpdate(scope.row.appointmentId)">编辑</el-button>
                    <el-popconfirm title="你确定要删除该业务吗？" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="delInfo(scope.row.appointmentId)">
                        <template #reference>
                            <el-button v-show="scope.row.appointmentStatus != 1 && scope.row.appointmentStatus != 3"
                                size="small" type="danger">移除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <el-row class="row-bg" justify="space-evenly">
                <el-col :span="6">
                    <el-pagination layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                        @current-change="getTableData" />
                </el-col>
            </el-row>
        </template>
    </el-card>


    <!-- START 新增弹出框 -->
    <el-dialog v-model="addVisible" title="新增订单信息" width="500">
        <el-form :model="addInfoForm">
            <el-form-item label="预约人员" label-width="20%">
                <!-- <el-input v-model="addInfoForm.userId" autocomplete="off" /> -->
                <el-select v-model="addInfoForm.userId" placeholder="选择用户" size="large">
                    <el-option v-for="item in userList" :key="item.userId" :label="item.realName"
                        :value="item.userId" />
                </el-select>
            </el-form-item>
            <el-form-item label="业务" label-width="20%">
                <!-- <el-input v-model="addInfoForm.departmentId" autocomplete="off" /> -->
                <el-select v-model="addInfoForm.departmentId" placeholder="选择业务" size="large">
                    <el-option v-for="item in departmentList" :key="item.departmentId" :label="item.departmentName"
                        :value="item.departmentId" />
                </el-select>
            </el-form-item>
            <el-form-item label="问题描述" label-width="20%">
                <el-input v-model="addInfoForm.problem" autocomplete="off" />
            </el-form-item>
            <el-form-item label="服务方式" label-width="20%">
                <!-- <el-input v-model="addInfoForm.typeId" autocomplete="off" /> -->
                <el-select v-model="addInfoForm.typeId" placeholder="选择服务方式" size="large">
                    <el-option v-for="item in type" :key="item.typeId" :label="item.typeName" :value="item.typeId" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addVisible = false">取消</el-button>
                <el-button type="primary" @click="subAdd">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- END 新增弹出框 -->

    <!-- START 修改弹出层 -->
    <el-dialog v-model="updateVisible" title="修改订单信息" width="500">
        <el-form :model="updateInfoForm">
            <el-form-item label="客户名称" label-width="20%">
                <el-input v-model="updateInfoForm.user.realName" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="业务" label-width="20%">
                <el-input v-model="updateInfoForm.department.departmentName" autocomplete="off" disabled/>
            </el-form-item>
            <el-form-item label="问题描述" label-width="20%">
                <el-input v-model="updateInfoForm.problem" autocomplete="off" />
            </el-form-item>
            <el-form-item label="服务类型" label-width="20%">
                <!-- <el-input v-model="updateInfoForm.typeId" autocomplete="off" /> -->
                <el-select v-model="updateInfoForm.typeId" placeholder="选择服务方式" size="large">
                    <el-option v-for="item in type" :key="item.typeId" :label="item.typeName" :value="item.typeId" />
                </el-select>
            </el-form-item>
            <el-form-item label="预约状态" label-width="20%">
                <!-- <el-input v-model="updateInfoForm.appointmentStatus" autocomplete="off" /> -->
                <el-select v-model="updateInfoForm.appointmentStatus" placeholder="请选择预约状态" size="large">
                    <el-option v-for="item in stateList" :key="item.id" :label="item.state" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="进度" label-width="20%">
                <el-input v-model="updateInfoForm.speed" autocomplete="off" />
                <!-- <el-slider v-model="updateInfoForm.speed" /> -->
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateVisible = false">取消</el-button>
                <el-button type="primary" @click="subUpdate">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- END 修改弹出层 -->
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from 'element-plus'
import orderApi from '@/api/orderApi';
import typeApi from "@/api/typeApi";
import userApi from "@/api/userApi";
import departmentApi from "@/api/departmentApi";

// 表格数据
const tableData = ref([]);
const pageInfo = ref({});
// 新增弹出层状态
const addVisible = ref(false);
// 修改弹出层状态
const updateVisible = ref(false);
// 新增部门信息
const addInfoForm = ref({
    userId: '',
    departmentId: '',
    problem: '',
    typeId: '',
});
// 修改部门信息
const updateInfoForm = ref({});
// 服务类型分类
const type = ref([]);
// 全部用户
const userList = ref([])
// 全部业务清单
const departmentList = ref([])
// 服务状态
const stateList = ref([
    {
        id: 0,
        state: '已预约'
    }, {
        id: 1,
        state: '已取消'
    }, {
        id: 2,
        state: '服务中'
    }, {
        id: 3,
        state: '已完成'
    }
])

// 获得服务类型
const getType = async () => {
    let resp = await typeApi.getAll()
    if (resp.code === 10000) {
        type.value = resp.data
    }

}

// 获得全部用户列表
const getUserList = async () => {
    let resp = await userApi.getUserList()
    if (resp.code === 10000) {
        userList.value = resp.data
    }
}

// 获得全部业务
const getDepartmentList = async () => {
    let resp = await departmentApi.getAll()
    if (resp.code === 10000) {
        departmentList.value = resp.data
    }
}

// 获取表格数据信息
const getTableData = (page) => {
    orderApi.getAll(page).then(
        resp => {
            if (resp.code === 10000) {
                pageInfo.value = resp.data;
                tableData.value = resp.data.list;
            }
        }
    );
}

// 提交新增部门信息
const subAdd = () => {
    orderApi.addInfo(addInfoForm.value)
        .then(resp => {
            if (resp.code === 10000) {
                // 关闭弹出层
                addVisible.value = false;
                // 清空数据
                addInfoForm.value = {
                    departmentName: ''
                };
                type.value = [];
                // 加载表格
                getTableData();
                // 显示提示信息
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                })
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                })
            }
        });
};

// 删除部门信息
const delInfo = (did) => {
    orderApi.delInfo(did)
        .then(resp => {
            if (resp.code === 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                });
                getTableData();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                });
                getTableData();
            }
        });
}

// 打开新增窗口
const showAdd = () => {
    getDepartmentList()
    getUserList()
    getType();
    addVisible.value = true
}

// 打开弹出层获取编辑前信息
const showUpdate = (did) => {
    getType();
    orderApi.getColumnById(did)
        .then(resp => {
            if (resp.code === 10000) {
                updateInfoForm.value = resp.data;
                if (resp.data.appointmentStatus != 3 && resp.data.appointmentStatus != 1) {
                    // 显示弹出层
                    updateVisible.value = true;
                }
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                });
            }
        });
}

// 提交修改信息
const subUpdate = () => {
    orderApi.updateInfo(updateInfoForm.value)
        .then(resp => {
            if (resp.code === 10000) {
                updateVisible.value = false;
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                });
                getTableData();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                });
            }
        });
};

getTableData(1);
</script>

<style scoped>
.slider-demo-block {
    max-width: 600px;
    display: flex;
    align-items: center;
}

.slider-demo-block .el-slider {
    margin-top: 0;
    margin-left: 12px;
}

.slider-demo-block .demonstration {
    font-size: 14px;
    color: var(--el-text-color-secondary);
    line-height: 44px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0;
}

.slider-demo-block .demonstration+.el-slider {
    flex: 0 0 70%;
}
</style>
